<cc:page type="sitepage" style="customize" showSidebar="false" showHeader="false" />
<cc>

    CCService css = new CCService(userInfo);
    String id=request.getParameter("id")==null?"":request.getParameter("id")+"";
</cc>
<!DOCTYPE html>
<html lang="">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
    <title>
    </title>
    <link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.7/theme-chalk/index.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/vant/2.12.39/index.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.1/vue.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vant/2.12.39/vant.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.7/index.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.24.0/axios.min.js"></script>
</head>
<body>

<div id="app">
    <div class="win-detail">
        <div class='top-styles'>
            <p>
                <van-icon name="arrow-left" @click='goBackCreate' />
            </p>
            <div>投中标数据</div>
        </div>
        <div class="win-date">
            <div class="win-date-style">
                <el-select v-model="tzbsjtjsj[0]" @focus='showDates = true'></el-select>
                —
                <el-select v-model="tzbsjtjsj[1]" @focus='showDates = true'></el-select>
                <div style='margin-left: 10px;width:60px' @click='getList'>查询</div>
            </div>
            <van-calendar v-model="showDates" type="range" @confirm="onConfirms" :min-date="minDate" />
        </div>
        <div class="detail-box win-special">
            <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoadWin">
                <div class="detail-list" v-for='item in tzbsjList'>
                    <p><span>公共资源交易中心</span><span>{{ item.sourceName }}</span></p>
                    <p><span>投标次数</span><span>{{ item.bidsNumber }}</span></p>
                    <p><span>中标次数</span><span>{{ item.winningNumber }}</span></p>
                    <p><span>中标总金额(万元)</span><span>{{ item.winningAmount }}</span></p>
                    <p><span>最大中标金额(万元)</span><span>{{ item.maxWinningAmount }}</span></p>
                </div>
            </van-list>
        </div>
    </div>
</div>
</body>

<script>
    new Vue({
        el: '#app',
        data: {
            //时间
            tzbsjtjsj: [],
            tzbsjList: [],
            loading: false,
            finished: false,
            zzmxList: [],
            totalDetail: 0,
            tzbsjListNum: 1,
            showDates: false,
            url: ['https://k8mm3cmt3235c7ed72cede6e.cloudcc.com/customize/page/eed30c4aea/saveAccount.jsp',
                'https://k8mm3cmt3235c7ed72cede6e.cloudcc.com/customize/page/eed30c4aea/queryDSK.jsp'
            ],
            invokeId: '12345678',
            code: '',
            minDate: new Date(2010, 0, 1), //最小日历时间
            accountId: "<cc:outprint>id</cc:outprint>",
            total: 0
        },
        mounted() {
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 365)
            this.tzbsjtjsj = [this.getClock(start), this.getClock(new Date())]
            this.getCode()
            // this.zzlbcx()
        },
        methods:{
            onConfirms(date) {
                const [start, end] = date;
                console.log(start, end)
                this.showDates = false;
                this.tzbsjtjsj = [start, end];
                this.tzbsjtjsj = [this.getClock(start), this.getClock(end)];
                // console.log(start,end,this.tzbsjtjsj,34)
            },
            // 时间处理方法
            getClock(e) {
                var date = e
                var year = date.getFullYear()
                var month = date.getMonth() + 1
                month < 10 ? (month = '0' + month) : ''
                var day = date.getDate()
                day < 10 ? (day = '0' + day) : ''
                return year + '-' + month + '-' + day
            },
            //动态加载资质明细列表
            //动态加载投中标数据列表
            async onLoadWin() {
                let {
                    url,
                    userAxios,
                    companyInfo,
                    invokeId,
                    getClock,
                    tzbsjListNum,
                    code,
                    tzbsjtjsj,
                } = this
                let data = {
                    invokeId,
                    data: {
                        creditCode: code,
                        // creditCode: '91350124064149509A',
                        beginTime: tzbsjtjsj[0],
                        endTime: tzbsjtjsj[1],
                        pageIndex: tzbsjListNum,
                        pageSize: 20,
                    },
                }
                if (!this.code) {
                    data.data.creditCode = await this.getCode()
                }
                let params = {
                    type: 'companyTradingCenterService',
                    data: JSON.stringify(data)
                }
                const _this = this
                userAxios(url[1], params, (res) => {
                    if (res.resultCode != '0000') {
                        _this.$message.error(res.resultMessage)
                        _this.loading = false;
                        _this.finished = true
                    } else {

                        if (res.data) {
                            _this.total = res.data.totalSize
                            _this.tzbsjList = _this.tzbsjList.concat(res.data.infos)
                            _this.tzbsjListNum++
                            _this.loading = false;
                            if (_this.tzbsjList.length >= res.data.totalSize) {
                                _this.finished = true
                                _this.loading = false;
                            }

                        } else {
                            _this.tzbsjList = _this.tzbsjList.concat([])
                            _this.loading = false;
                            _this.finished = true
                            // _this.tzbsjList = [..._this.tzbsjList]
                        }
                    }

                })
            },
            async getList() {
                this.tzbsjListNum = 1
                let {
                    url,
                    userAxios,
                    companyInfo,
                    invokeId,
                    getClock,
                    tzbsjListNum,
                    tzbsjtjsj,
                    code
                } = this
                let data = {
                    invokeId,
                    data: {
                        creditCode: code,
                        // creditCode: '91350124064149509A',
                        beginTime: tzbsjtjsj[0],
                        endTime: tzbsjtjsj[1],
                        pageIndex: tzbsjListNum,
                        pageSize: 20,
                    },
                }
                if (!this.code) {
                    data.data.creditCode = await this.getCode()
                }
                let params = {
                    type: 'companyTradingCenterService',
                    data: JSON.stringify(data)
                }
                const _this = this
                userAxios(url[1], params, (res) => {
                    if (res.resultCode != '0000') {
                        this.$message.error(res.resultMessage)

                    } else {
                        if (res.data) {
                            _this.total = res.data.totalSize
                            _this.tzbsjList = _this.tzbsjList.concat(res.data.infos)
                            _this.tzbsjListNum++
                            _this.loading = false;
                            if (_this.tzbsjList.length >= res.data.totalSize) {
                                _this.finished = true
                            }

                        } else {
                            _this.tzbsjList = _this.tzbsjList.concat([])
                            _this.loading = false;
                            _this.finished = true
                            // _this.tzbsjList = [..._this.tzbsjList]
                        }
                    }

                })
            },
            // 获取
            // 获取
            getCode() {
                let params = {
                    type: 'findAccountCoe',
                    data: this.accountId
                }
                const _this = this
                return new Promise((resolve) => {
                    this.userAxios(this.url[0], params, (res) => {
                        if (res.data) {
                            _this.code = res.data
                            return resolve(res.data)

                        } else {
                            this.$message.error('获取统一社会信用代码错误')
                        }

                    })
                })

            },
            /**
             * 网络请求
             */
            userAxios(path, params, funcTion = () => {}) {
                this.getRequest(path, params)
                    .then(
                        (res) => {
                            funcTion(res)
                            return res
                        },
                        (err) => {
                            return err
                        }
                    )
                    .catch((error) => {
                        return error
                    })
            },
            //获取cookie的值
            getCookie(key) {
                let value = decodeURIComponent(document.cookie.replace(new RegExp('(?:(?:^|.*;)\\s*' + encodeURIComponent(
                    key).replace(/[\-\.\+\*]/g, '\\$&') + '\\s*\\=\\s*([^;]*).*$)|^.*$'), '$1')) || null;
                if (value && value.substring(0, 1) === '{' && value.substring(value.length - 1, value.length) === '}') {
                    try {
                        value = JSON.parse(value);
                    } catch (e) {
                        return value;
                    }
                }
                return value;
            },
            // http请求封装
            getRequest(url, params) {
                const service = axios.create({
                    timeout: 60000, // request timeout
                    headers: {
                        'Content-Type': 'application/json; charset=utf-8',
                    },
                })
                // request interceptor
                service.interceptors.request.use(
                    config => {
                        config.headers.accessToken = this.getCookie('binding')
                        return config
                    },
                    error => {
                        // Do something with request error
                        Promise.reject(error)
                    }
                )

                // response interceptor
                service.interceptors.response.use(
                    response => {
                        const code = response.status || 200
                        if (code !== 200) {
                            return Promise.reject(null == response.statusText ? "未知异常" : response.statusText)
                        } else {
                            return response.data
                        }
                    },
                    error => {
                        return Promise.reject(error)
                    }
                )
                // getLight(url, data = {}, responseType = '') {

                // },
                return service({
                    url: url,
                    method: 'post',
                    params: {
                        ...params
                    }
                })
            },
            goBackCreate() {
                window.location.replace('https://k8mm3cmt3235c7ed72cede6e.cloudcc.com/weiquery.action?m=query&id=' + this.accountId)
            }
        }
    })

</script>

</html>
<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    .detail-box {
        min-height: 80vh;
        margin-bottom: 80px;
    }
    .el-message--error,
    .el-message--success,
    .el-message--warning {
        top: 80px !important;
    }
    .top-styles {
        width: 100%;
        height: 44px;
        border-bottom: 1px solid #D8DDE6;
        line-height: 44px;
        padding: 0 15px;
        font-size: 18px;
        position: fixed;
        top: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #ffffff;
        z-index: 2147483647;
    }

    .top-styles p {
        position: absolute;
        left: 12px;
    }
    .detail-list {
        padding: 16px 15px;
        border-bottom: 1px solid #D8DDE6;
        font-size: 14px;
        color: #17315C;
        letter-spacing: 0;
    }

    .detail-list p {
        margin-top: 10px;
        display: flex;
    }

    .detail-list span:first-child {
        color: #54698D;
        margin-right: 18px;
        display: inline-block;
    }

    .win-special .detail-list span:first-child {
        display: inline-block;
        width: 130px;
    }

    .detail-list span:last-child {
        flex: 1;
    }

    .win-detail {
        background: #F4F6F9;
    }

    .win-special {
        background: #ffffff;
        margin-top: 0;
    }

    .win-date {
        padding: 9px 15px;
    }

    .win-date .van-popup--bottom {
        bottom: 80px
    }

    .win-date-style {
        display: flex;
        align-items: center;
    }

    .win-date-style .el-select {
        width: 60%;
    }

    .win-date-style .el-select:first-child {
        margin-right: 6px;
    }

    .win-date-style .el-select:nth-child(2) {
        margin-left: 6px;
    }

    .win-date .el-popper[x-placement^=bottom] {
        display: none;
    }

</style>